<template>
  <div class="dashboard-editor-container" style="padding:16px;">
    <el-row :gutter="12" style="padding:6px 6px 0 0;margin-bottom:16px;">
      <el-col :span="12" :xs="24" >
        <!--    <el-card  style = "height: 40%;">地图信息检索
            </el-card>
            <br>
            <el-card style = "height: 40%;">资料信息检索
            </el-card>-->

        <div style="display: flex; margin-top: 20px; height: 150px;width: 100%;">

          <div  class="transition-box" style=" background-color: #fb434b;border-radius: 20px">
            <div style=" top: 50%;font-size:50px">{{this.mapsize}}</div>

            <div style=" font-weight:bold ">  地图信息数量</div>
            <br>

          </div>

        </div>
        <div style="display: flex; margin-top: 20px; height: 150px;width: 100%;">

          <div  class="transition-box" style=" background-color: #ac6beb;border-radius: 20px">
            <div style=" top: 50%;font-size:50px">{{this.datasize}}</div>

            <div style=" font-weight:bold ">  资料信息数量</div>
            <br>

          </div>

        </div>

      </el-col>
      <el-col :span="12" :xs="24" >
        <!--  <el-card style = "height: 40%;">借阅信息管理</el-card>
          <br>
          <el-card style = "height: 40%;">读者信息管理</el-card>-->

        <div style="display: flex; margin-top: 20px; height: 150px;width: 100%;">

          <div  class="transition-box" style=" background-color: #fdae2d;border-radius: 20px">
            <div style=" top: 50%;font-size:50px">{{this.borrowsize}}</div>

            <div style=" font-weight:bold ">  借阅信息数量</div>
            <br>

          </div>

        </div>
        <div style="display: flex; margin-top: 20px; height: 150px;width: 100%;">

          <div  class="transition-box" style=" background-color: #45c360;border-radius: 20px">
            <div style=" top: 50%;font-size:50px">{{this.baseinfoize}}</div>

            <div style=" font-weight:bold ">  读者信息数量</div>
            <br>

          </div>

        </div>

      </el-col>
    </el-row>


    <!--  主页菜单  -->
    <el-row :gutter="12" style="padding:6px 25px 0 0;margin-bottom:16px;">
      <el-col :span="12" :xs="24" >
        <el-card class="box-card" style = "height: 50%">
          <div slot="header" class="clearfix">

            <span style="color: #116fcf;font-weight :600;"       class="el-icon-s-order"> 借阅信息</span>
            <el-button-group>
            </el-button-group>
            <a><el-tag type="info" class = "tag-style" size="mini"><router-link to="/borrow/borrowdengji">更多</router-link></el-tag></a>
          </div>
          <el-table
            :data="borrowDatumList"
            :show-header="false"
            style="width: 100%;height: 330px;margin-top: -5px"
            @row-click = "handle"
            :cell-style="cellStyle"
          >

            <el-table-column

              width="45" >
              <template slot-scope="scope">
                <span class = "number_top_circle" v-if = "(scope.$index+1)%2==0">  {{scope.$index+1}}</span>
                <span class = "number_top_circle_odd" v-if = "(scope.$index+1)%2==1">  {{scope.$index+1}}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="资料信息名称"
              align="center"
              prop="dataname"
              :show-overflow-tooltip="true"

            />
            <el-table-column
              label="编号"
              align="center"
              prop="barcode"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="位置"
              align="center"
              prop="position"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="创建时间" align="center" prop="createTime" width="100">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>

          </el-table>

        </el-card>
      </el-col>


      <el-col :span="12" :xs="24" >

        <el-card class="box-card" style = "height: 50%">
          <div slot="header" class="clearfix">



            <el-button-group>

            </el-button-group>

            <span style="color: #116fcf;font-weight :600;"       class="el-icon-s-order"> 归还信息</span>
            <a><el-tag type="info" class = "tag-style" size="mini"><router-link to="/borrow/borrowdengji">更多</router-link></el-tag></a>
          </div>
          <el-table
            :data="returnDatumList"
            :show-header="false"
            style="width: 100%;height: 330px;margin-top: -5px"
            @row-click = "handle"
            :cell-style="cellStyle"
          >

            <el-table-column

              width="45" >
              <template slot-scope="scope">
                <span class = "number_top_circle" v-if = "(scope.$index+1)%2==0">  {{scope.$index+1}}</span>
                <span class = "number_top_circle_odd" v-if = "(scope.$index+1)%2==1">  {{scope.$index+1}}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="地图信息名称"
              align="center"
              prop="dataname"
              :show-overflow-tooltip="true"

            />
            <el-table-column
              label="编号"
              align="center"
              prop="barcode"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="位置"
              align="center"
              prop="position"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="创建时间" align="center" prop="createTime" width="100">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>

          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { listBorrow, getBorrow, delBorrow, addBorrow, updateBorrow } from "@/api/group/lyq/borrow";
  import { listBaseinfo, getBaseinfo, delBaseinfo, addBaseinfo, updateBaseinfo } from "@/api/group/sb/baseinfo";
  import { listMap, getMap, delMap, addMap, updateMap } from "@/api/group/whd/map";
  import { listDatum, getDatum, delDatum, addDatum, updateDatum } from "@/api/group/lck/datum";

  export default {
    name: "Profile",
    components: {

    },
    props: {
      user: {
        type: Object
      }
    },

    dicts:[
    ],

    data() {


      return {

        visible: false,
        date:new Date(),
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          dataname: null,
          barcode: null,
          orderByColumn:"createTime",
          isAsc:"desc"
        },
        borrowqueryParams: {
          pageNum: 1,
          pageSize: 10,
          dataname: null,
          givebackStatus: null,
          orderByColumn:"createTime",
          isAsc:"desc"
        },
        username:null,
        // 地图数据
        mapList: [],
        borrowDatumList:[],
        returnDatumList:[],
        mapsize:{},
        borrowsize:{},
        datasize:{},
        baseinfoize:{},
        // 日程列表
        todayCalendar:[],


      };
    },
    //获取头像
    computed: {

    },
    created() {
      this.getList();
      this.getListdata();
      this.getlistBorrow();
      this.getlistBaseinfo();
      this.getlistBorrowda();
      this.getlistBorrowre();
    },
    watch:{

    },

    methods: {
      /** 详细按钮操作 */
      handleView(row) {
        const id = row.id || this.ids
        getBorrow(id).then(response => {
          this.form = response.data;
          this.$router.push({ path:"/borrow/detail", query: {id}});
        });
      },

      /** 查询地图信息列表 */
      getList() {
        this.loading = true;
        listMap(this.queryParams).then(response => {
          this.mapList = response.rows;
          this.mapsize=response.total;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询资料信息列表 */
      getListdata() {
        this.loading = true;
        listDatum(this.queryParams).then(response => {
          this.DatumList = response.rows;
          this.datasize=response.total;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询借阅列表 */
      getlistBorrow() {
        listBorrow(this.queryParams).then(response => {
          this.borrowsize=response.total;
          this.total = response.total;
        });





      },

      /* 已借阅*/
      getlistBorrowda() {
        this.borrowqueryParams.givebackStatus=0;
        listBorrow(this.borrowqueryParams).then(response => {
          this.borrowDatumList = response.rows;
          this.total = response.total;

        });

      },
      /* 已归还*/
      getlistBorrowre() {
        this.borrowqueryParams.givebackStatus=1;
        listBorrow(this.borrowqueryParams).then(response => {
          this.returnDatumList = response.rows;
          this.total = response.total;
        });

      },












      /** 查询读者列表 */
      getlistBaseinfo() {
        listBaseinfo(this.username).then(response => {

          this.baseinfoize=response.total;
          this.total = response.total;

        });
      },



      //点击公告触发的事件
      handle(row, event, column) {
        // console.log(row)
        /** 详细按钮操作 */

          const id = row.id || this.ids
          getBorrow(id).then(response => {
            this.form = response.data;
            this.$router.push({ path:"/borrow/detail", query: {id}});
          });

      },
      //公告显示小手
      cellStyle(data) {

        return "cursor:pointer;text-align:left;"
      },
      indexMethod(index) {
        return index +1;
      },

      handleClick(tab, event) {
        console.log(tab, event);
      },
      /** 查询公告列表 */

      /** 详情操作 */
      getListb(row) {
        const id = row.id || this.ids
        /** 详细按钮操作 */

          getBorrow(id).then(response => {
            this.form = response.data;
            this.$router.push({ path:"/borrow/detail", query: {id}});
          });



      },







    },

  };
</script>

<style lang="scss" scoped>




  .dashboard-editor-container {

    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
      padding-left: 30px;
    }

    .el-tabs .el-tabs__content {
      max-height: 100px;
      overflow: auto;
    }

  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }

  /* 固定 应用board 宽度; */
  .el-tabs--card {
    height: calc(32vh);
    /* overflow-y: auto; */
  }

  .el-tab-pane {
    height: calc(32vh);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .tag-style{
    height: 19px;
    color: #116fcf;
    font-family: 黑体;
    font-size: 13px;
    float: right;
    margin-right: 20px;
    line-height:15px;

  }
  .tag-menu-style{
    height: 19px;
    color: #116fcf;
    font-family: 黑体;
    font-size: 13px;
    float: right;
    margin-right: 0px;
    line-height:15px;
    margin-top: 5px;

  }

  .bannerimg{
    width: 100%;
    height: inherit;
  }
  /* 文字样式*/
  .carousel-p {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 25px;
    line-height: 35px;
    text-align: center;
    padding-left: -28px;
    color: white;
    bottom: 66px;
    position: relative;
  }
  .el-icon-d-arrow-right{
    float: right;
    margin-right: 20px;
    padding-top: 5px;
    font-size:10px !important;
  }

  .is-selected {
    color: #1989FA;
  }


  /*日历自定义样式*/
  ::v-deep .el-calendar__header {
    // 修改头部背景颜色
    background-color: #FFFFFF;
    padding: 3px 5px;
    border: none;
    display: flex;
    justify-content: center;
    margin-top: 35px;

    .el-calendar__button-group {
      // 隐藏原生按钮
      display: none;
    }


    .el-calendar__title {
      // 修改头部标题的字体颜色
      color: #495060 !important;
      font-size: 20px;
      font-weight: bolder;
    }
  }

  ::v-deep .el-calendar__body {
    // 修改主题部分
    padding: 0;
  }

  ::v-deep .el-calendar-table {
    thead {
      th {
        // 修改头部星期部分
        padding: 5px;
        background-color: #2f81d5;
        color: white;
      }
    }

    .is-selected {
      .el-calendar-day {
        p {
          // 选中日期颜色
          color: black;
        }
      }
    }

    .el-calendar-day {
      // 每天小块样式设置
      padding: 0;
      height: 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        // 所有日期颜色
        color: black;
        z-index: 1;
        user-select: none;
        display: flex;
      }
    }
  }

  ::v-deep .el-calendar-table__row {
    .prev, .next {
      // 修改非本月
      .el-calendar-day {
        p {
          color: #f0d9d5;
        }
      }
    }

    td {
      // 修改每一个日期td标签
      &:first-child, &:last-child {
        background-color: #f5f5f5;
      }
    }
  }

  button {
    padding: 3px 10px;
  }

  //隐藏el-tab-pane滚动条
  ::v-deep .el-tab-pane {
    height: calc(100vh - 110px);
    overflow-y: hidden;
  }


  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden!important;


  }

  ::v-deep .-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }
  ::v-deep.el-table .warning-row {
    background: oldlace;
  }

  ::v-deep.el-table .success-row {
    background: #f0d9d5;
  }
  .pos1{

    position:absolute;             // 绝对定位,同时规定left和top
    left: 0;
    top:0;
  }


  //swiitch开关的样式
  ::v-deep .el-switch__core{
    width:30px!important;
    height:15px;

  }

  ::v-deep .el-switch__core::after{
    width:14px;
    height:14px;
    margin-top:-1px;
    margin-bottom: -4px;
  }
  ::v-deep.el-switch.is-checked .el-switch__core::after {
    left: 100%;
    margin-left: -14px;
  }

  //更改table表中文字的颜色
  ::v-deep.el-table{
    color: #000000;
  }

  //日程文字颜色
  ::v-deep.el-alert--success.is-light {
    background-color: #e7faf0;
    color: #000000;
  }
  ::v-deep.el-alert--success.is-light .el-alert__description {
    color: #507761;
  }


  /*数字加圈*/
  .number_top_circle {
    display: table-cell;
    border-radius: 18px;
    background-color: #4b9dfc;
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
  }
  .number_top_circle_odd {
    display: table-cell;
    border-radius: 18px;
    background-color: #4b9dfc;
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
  }

  //个人中心头像样式
  .user-avatar{
    border-radius: 50%;
    height:165px;
    border: 1px solid #409eff;

  }
  //去掉table表下面的边框线
  .el-table__row>td {
    border: none;
  }

  .el-table::before {
    height: 0px;
  }

  //纵向分割线
  ::v-deep.el-divider--vertical{

    height: 10em;
  }

  .selectBtn{
    background-color: #1482f0;
    color: #ffffff;
  }

</style>
<!-- 日历table表的样式-->
<style>




  .el-image__error {
    font-size: 10px;

  }






  .size-icon{
    font-size: 25px;
  }

  .createInfo th, .createInfo tr {
    background-color: #409eff !important;
    color: #FFFFFF;
    text-align: center;

  }
  .createInfo tbody tr:hover>td {
    background-color: #409eff !important;
  }

  /*日期组件绝对定位*/
  .main{
    position: relative;

  }
  .target{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,0%);
  }


  /*menu中更多按钮*/
  .loginOut{
    /* position: absolute;right:23%;top:25px;*/
    position: absolute;right:27%;top:25px;
    color: #e6a23c;
    /*  font-weight: 600;
      font-size: 14px;*/
  }
  .grid-content{

    padding-left: 0%;
    padding-right: 0%;
  }

  .transition-box {
    margin-bottom: 10px;
    width: 100%;
    height: 150px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;

  }

</style>
